import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

/**
 * Geometry
 */
const geometry = new THREE.PlaneGeometry(1, 1)




// mix(x,y,a)   x*(1-a)+y*a


/**
 * 黑白渐变
 * const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    varying vec2 vUv;
    void main(){ 
      vec3 color1 = vec3(0.0);
      vec3 color2 = vec3(1.0);
      vec3 color = mix(color1,color2,vUv.x);
      gl_FragColor = vec4(color,1.0);
    }
`
 */


/**
 * 重复条纹+插值颜色
const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    varying vec2 vUv;
    void main(){ 
      vec3 color1 = vec3(1.0,1.0,0.0);
      vec3 color2 = vec3(0.0,1.0,1.0);
      float mixer = step(0.5,fract(vUv.x * 3.0));
      vec3 color = mix(color1,color2,mixer);
      gl_FragColor = vec4(color,1.0);
    }
`
 */


/**
 * 圆
const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    varying vec2 vUv;
    void main(){ 
      vec3 color1 = vec3(1.0,1.0,0.0);
      vec3 color2 = vec3(0.0,1.0,1.0);
      float len = length(vUv - vec2(0.5));
      float mixer = step(0.25,len);
      vec3 color = mix(color1,color2,mixer);
      gl_FragColor = vec4(color,1.0);
    }
`
 */


const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    varying vec2 vUv;
    void main(){ 
      vec3 color1 = vec3(1.0,1.0,0.0);
      vec3 color2 = vec3(0.0,1.0,1.0);
      float mixer1 = vUv.x + vUv.y;
      float mixer2 = 2.0 - ( vUv.x + vUv.y);
      float mixer = min(mixer1,mixer2);
      vec3 color = mix(color1,color2,mixer);
      gl_FragColor = vec4(color,1.0);
    }
`




/**
 * Matetrial
 */
const material = new THREE.ShaderMaterial({
    uniforms:{
        uTime:{
            value:0
        }
    },
    vertexShader:vertex,
    fragmentShader:fragment
})

/**
 * Mesh
 */
const mesh = new THREE.Mesh(geometry, material)

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 3

/**
 * Scene
 */
const scene = new THREE.Scene()
scene.add(mesh)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)
renderer.setClearColor('#f19191')



/**
 * OrbitControls
 */
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true 



/**
 * Update
 */
let clock = new THREE.Clock();
let elpasedTime  = 0;
const tick = () => {
    elpasedTime = clock.getElapsedTime();
    // material.uniforms.uTime.value = elpasedTime;
    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()